<template>
	<div class="shop">
		<div class="shop-title">北卡龙{{classifyinfo.name}}</div>
		<div class="shop-title1">特约施工中心查询</div>
		
		<div class="shop-body">
			<div class="shop-body-flex">
				<van-field
				  readonly
				  clickable
				  label="类型"
				  :value="classify_name"
				  placeholder="请选择类型"
				  @click="classifyPicker = true"
				/>
				<van-popup v-model="classifyPicker" round position="bottom">
				  <van-picker
				    show-toolbar
				    :columns="classifyall"
				    @cancel="classifyPicker = false"
				    @confirm="onclassifyConfirm"
				  />
				</van-popup>
				
			</div>
			
			<div class="shop-body-flex">
				<van-field
				  readonly
				  clickable
				  label="省份"
				  :value="province_name"
				  placeholder="请选择省份"
				  @click="provincePicker = true"
				/>
				<van-popup v-model="provincePicker" round position="bottom">
				  <van-picker
				    show-toolbar
				    :columns="provinceall"
				    @cancel="provincePicker = false"
				    @confirm="onprovinceConfirm"
				  />
				</van-popup>
				
			</div>
			
			<div class="shop-body-flex">
				<van-field
				  readonly
				  clickable
				  label="城市"
				  :value="city_name"
				  placeholder="请选择城市"
				  @click="cityPicker = true"
				/>
				<van-popup v-model="cityPicker" round position="bottom">
				  <van-picker
				    show-toolbar
				    :columns="cityall"
				    @cancel="cityPicker = false"
				    @confirm="oncityConfirm"
				  />
				</van-popup>
				
			</div>
			
			<div class="shop-body-flex">
				<van-field
				  readonly
				  clickable
				  label="区县"
				  :value="area_name"
				  placeholder="请选择区县"
				  @click="areaPicker = true"
				/>
				<van-popup v-model="areaPicker" round position="bottom">
				  <van-picker
				    show-toolbar
				    :columns="areaall"
				    @cancel="areaPicker = false"
				    @confirm="onareaConfirm"
				  />
				</van-popup>
				
			</div>
			
		</div>
		
		<div class="shop-body">
			<div class="shop-body-flex">
				<van-field v-model="name" label="店名" placeholder="请输入施工中心名称" />
			</div>
		</div>
		
		
		<div class="shop-button" @click="inquireClick()">查询</div>
		
	</div>
</template>

<script>
	export default {
		data() {
			return {
				classify_id : 1,
				classifyinfo: [],
				classifyall : [],
				classifyPicker : false,
				classify_name : '',
				//省
				provinceall : [],
				provincePicker : false,
				province_name : '',
				//市
				cityall  :[],
				cityPicker: false,
				city_name : '',
				//区
				areaall : [],
				areaPicker: false,
				area_name : '',
				//店名
				name : ''
			};
		},
		created() {
			var  query  = this.$route.query;
			if(query.classify_id){
				this.classify_id     = query.classify_id;
			}
			
			this.getall();
		},
		methods: {
			onclassifyConfirm(value) {
				this.classify_name = value;
				this.classifyPicker = false;
			},
			onprovinceConfirm(value){
				let that = this;
				that.province_name = value;
				that.provincePicker = false;
				that.$http('get','/api/index/city',{'classify_id':that.classify_id,'province_name':that.province_name}) .then(function (res) {
					that.cityall  = res.data;
				});
			},
			oncityConfirm(value){
				let that = this;
				that.city_name = value;
				that.cityPicker = false;
				that.$http('get','/api/index/area',{'classify_id':that.classify_id,'city_name':that.city_name}) .then(function (res) {
					that.areaall  = res.data;
				});
			},
			onareaConfirm(value){
				let that = this;
				that.area_name = value;
				that.areaPicker = false;
			},
			inquireClick(){
				var str   =  'name='+this.name+'&classify_name='+this.classify_name+'&province_name='+this.province_name+'&city_name='+this.city_name+'&area_name='+this.area_name+'&classify_id='+this.classify_id;
				this.$router.push('/shoplist?'+str)
			},
			getall(){
				let that = this;
				that.$http('get','/api/index/classify',{'classify_id':that.classify_id}) .then(function (res) {
					that.classifyinfo  = res.data;
				});
				that.$http('get','/api/index/classifyall',{'classify_id':that.classify_id}) .then(function (res) {
					that.classifyall  = res.data;
				});
				that.$http('get','/api/index/province',{'classify_id':that.classify_id}) .then(function (res) {
					that.provinceall  = res.data;
				});
				
			}
		},
	};
</script>

<style lang="less">
	.shop {
		width: 100%;
		height: 100%;
		background-color:#fbf9fe;
		.shop-title {
			padding-top: 20px;
			text-align: center;
			font-size: 28px;
			font-weight: 400;
			margin: 0 15%;
			color: #333;
		}
		.shop-title1 {
			margin-top: 0.77em;
			margin-bottom: 0.3em;
			padding-left: 15px;
			padding-right: 15px;
			color: #888;
			font-size: 14px;
			text-align: center;
		}
		
	}
	
</style>